<template>
  <div class="draggableElement" v-if="itemData.url && itemData.category === 1">
    <div class="draggableIcon">
      <div
        v-if="itemData.modelType === EQUIP_TYPE.LINE"
        draggable="true"
        @dragstart="handleDragStart"
        :style="{
          width: '44px',
          height: '44px',
          margin: 'auto',
          position: 'relative',
          top: '3px',
        }"
      >
        <MinusOutlined
          style="font-size: 36px; position: relative; top: 4px; color: #5fd767"
        />
      </div>
      <div
        v-else
        draggable="true"
        @dragstart="handleDragStart"
        :style="{
          backgroundImage: `url(${itemData.url})`,
          backgroundRepeat: 'no-repeat',
          backgroundSize: '100%',
          backgroundPosition: 'center center',
          width: '44px',
          height: '44px',
          margin: 'auto',
          position: 'relative',
          top: '3px',
        }"
      />
    </div>
    <div class="draggableName">{{ itemData.deviceName }}</div>
  </div>
</template>
<script setup>
// 
import { useStionConfigStore } from "@/stores/stationConfig"
import { EQUIP_TYPE } from "@/constants/stationConfig"
import { MinusOutlined } from "@ant-design/icons-vue"
const {
  configData,
  changeEquipType,
  changeEquipData,
  changeConfigData,
  changeDragging,
} = useStionConfigStore()
const $api = inject("$api")
const props = defineProps({
  itemData: {
    type: String,
    required: true,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
})
// 处理 dragstart 事件
const handleDragStart = async (event) => {
  changeDragging(true)
  // 通过setData 传递的图标的url
  changeEquipType(props.itemData.modelType)
  changeEquipData(props.itemData)
  // 首次拖到画布上，需要获取资产编码
  let res
  let assetCode
  if (props.itemData.modelType === EQUIP_TYPE.CHONG_DIAN_ZHUANG) {
    const promises = [
      $api.assertCode({ type: EQUIP_TYPE.DIAN_CHI_DUI }),
      $api.assertCode({ type: EQUIP_TYPE.DIAN_CHI_CU }),
    ]
    res = await Promise.all(promises)
    assetCode = res.map((item) => item.data)
  } else {
    res = await $api.assertCode({
      type: props.itemData.modelType,
    })
    assetCode = res.data
  }
  changeConfigData({
    ...configData,
    assetCode,
  })
}
</script>
<style scoped>
.draggableElement {
  cursor: grab;
  width: 50px;
  margin-bottom: 20px;
}
.draggableIcon {
  outline: 1px solid #ccc;
  width: 50px;
  height: 50px;
}
.draggableName {
  margin-top: 5px;
  width: 50px;
  font-size: 12px;
}
</style>
